<template>
  <div class="main">
    <el-container>
      <el-header>
        <div class="theme">
          <span class="logoImg">天刑软件管理</span>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '64px' : '200px'">
          <div class="toggle-button" @click="toggleCollapse">|||</div>
          <el-menu
            :default-active="activePath"
            class="el-menu-vertical-demo"
            background-color="#304156"
            text-color="#fff"
            active-text-color="#409EFF"
            unique-opened
            :collapse="isCollapse"
            :collapse-transition="false"
            router
          >
            <!-- 一级菜单 -->
            <div
              :index="item.id"
              v-for="item in menuList"
              :key="item.id"
              class="menu_box"
            >
              <div v-if="item.children.length === 0">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.label"
                  placement="right"
                  :disabled="!isCollapse"
                >
                  <el-menu-item :index="item.id" @click="saveNavState(item.id)">
                    <i :class="iconObj[item.id]"></i>
                    <span :class="isCollapse === true ? 'disappear' : ''">{{
                      item.label
                    }}</span>
                  </el-menu-item>
                </el-tooltip>
              </div>
              <div v-else>
                <el-submenu
                  :index="item.id"
                  :key="item.id"
                  :class="isCollapse === true ? 'icon_disappear' : ''"
                >
                  <template slot="title">
                    <i :class="iconObj[item.id]"></i>
                    <span :class="isCollapse === true ? 'disappear' : ''">{{
                      item.label
                    }}</span>
                  </template>
                  <!-- 二级菜单 -->
                  <el-menu-item
                    :index="menu.id"
                    v-for="menu in item.children"
                    :key="menu.id"
                    @click="saveNavState(menu.id)"
                    >{{ menu.label }}</el-menu-item
                  >
                </el-submenu>
              </div>
            </div>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data () {
    return {
      menuList: [

        { id: '/userInfo', label: '用户中心', pid: '1', url: '#', type: '1', sort: 2, resCode: 'bxywResultView', children: [] },
        { id: '1-2', label: '资源管理', pid: '1', url: '#', type: '1', sort: 5, resCode: 'bxywResultBoard', children: [] },
        {
          id: '1-3',
          label: '软件管理',
          pid: '1',
          url: '#',
          type: '1',
          sort: 11,
          resCode: 'bxywOrdermanage',
          children: [
            { id: '1-3-1', label: '投保管理', pid: '1-3', url: '#', type: '1', sort: 11, resCode: 'bxywOrderListManage', children: [] },
            { id: '1-3-2', label: '批改管理', pid: '1-3', url: '#', type: '1', sort: 21, resCode: 'bxywCorrectManage', children: [] },
            { id: '1-3-3', label: '退保管理', pid: '1-3', url: '#', type: '1', sort: 31, resCode: 'bxywCancelPolicy', children: [] },
            { id: '1-3-4', label: '发票管理', pid: '1-3', url: '#', type: '1', sort: 41, resCode: 'bxywBillManage', children: [] },
            { id: '1-3-5', label: '续保管理', pid: '1-3', url: '#', type: '1', sort: 60, resCode: 'bxywRenewalManage', children: [] }
          ]
        },
        {
          id: '1-4',
          label: '图片管理',
          pid: '1',
          url: '#',
          type: '1',
          sort: 21,
          resCode: 'bxywProduct',
          children: [
            { id: '1-4-1', label: '保险方案管理', pid: '1-4', url: '#', type: '1', sort: 21, resCode: 'bxywPlanmanage', children: [] },
            { id: '1-4-2', label: '险种管理', pid: '1-4', url: '#', type: '1', sort: 31, resCode: 'bxywProductmanage', children: [] }
          ]
        },
        {
          id: '1-5',
          label: '音乐管理',
          pid: '1',
          url: '#',
          type: '1',
          sort: 41,
          resCode: 'bxywAnalysis',
          children: [
            { id: '1-5-1', label: '展业过程', pid: '1-5', url: '#', type: '1', sort: 1, resCode: 'bxywAnalysis_achievement', children: [] },
            { id: '1-5-2', label: '销售渠道', pid: '1-5', url: '#', type: '1', sort: 11, resCode: 'bxywAnalysis_sale', children: [] }
          ]
        }

      ],
      isCollapse: false,
      iconObj: {
        '/userInfo': 'iconfont icon-user',
        '1-2': 'iconfont icon-tijikongjian',
        '1-3': 'iconfont icon-shangpin',
        '1-4': 'iconfont icon-danju',
        '1-5': 'iconfont icon-baobiao'
      },
      activePath: ''
    };
  },
  methods: {
    toggleCollapse () {
      // 点击按钮切换展开和折叠
      this.isCollapse = !this.isCollapse;
    },
    saveNavState (path) {
      alert(path);
      window.sessionStorage.setItem('activePath', path);
      this.activePath = path;
    }
  },
  created: {

  }
};
</script>
<style lang="less" scoped>
.main {
  height: 100%;
}
.el-container {
  height: 100%;
}
.el-header {
  background-color: #304156;
  padding: 0px;
}
.el-aside {
  height: 100%;
  background-color: #304156;
  .el-menu {
    border-right: none;
  }
}
.el-main {
  height: 100%;
  background-color: rebeccapurple;
}
.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #ffffff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.iconfont {
  margin-right: 20px;
  margin-left: 5px;
}
.el-menu /deep/ .menu_box {
  .icon_disappear .el-submenu__title .el-submenu__icon-arrow {
    display: none;
  }
  .disappear {
    display: none;
  }
}

.theme {
  width: 200px;
  height: 100%;
  text-align: center;

  .logoImg {
    display: block;
    line-height: 50px;
    width: 100%;
    height: 100%;
    font-size: 19px;
    font-weight: bold;
    color: white;
    background-color: #f5a30e;
  }
}
</style>
